<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 20/05/30
  Time: 09:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!--输出,条件,迭代标签库-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="fmt"%> <!--数据格式化标签库-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="sql"%> <!--数据库相关标签库-->
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="fn"%> <!--常用函数标签库-->
<%@ page isELIgnored="false"%> <!--支持EL表达式，不设的话，EL表达式不会解析-->
<html>
<head>
    <title>Title</title>
</head>
<script type="text/javascript" src="${pageContext.request.contextPath}/lib/js/jquery-1.4.3.js">
</script>

<body>

    <form name="form1" id="form1" action="" method="post">
        <label for="name1"> 用户姓名<input id="name1" type="text" name="name" /></label>
        <label for="age1"> 年龄<input id="age1" type="text" name="age" /></label>
        <label for="car1.name"> 汽车厂商<input id="car1.name" type="text" name="car1.name" /></label>
        <label for="car1.price"> 汽车价格<input id="car1.price" type="text" name="car1.price" /></label>
        <label for="car1.speed"> 汽车速度<input id="car1.speed" type="text" name="car1.speed" /></label>
        <button>提交</button>
    </form>

    <hr/>
    <h1>使用json提交用户数据</h1>
    <form name="form2" id="form2" action="" method="post">
        <label for="name2"> 用户姓名<input id="name2" type="text" name="name" /></label>
        <label for="age2"> 年龄<input id="age2" type="text" name="age" /></label>
        <label for="car2_name"> 汽车厂商<input id="car2_name" type="text" name="car2_name" /></label>
        <label for="car2_price"> 汽车价格<input id="car2_price" type="text" name="car2_price" /></label>
        <label for="car2_speed"> 汽车速度<input id="car2_speed" type="text" name="car2_speed" /></label>
        <button type="button" id="saveBtn">保存</button>
    </form>

    <hr/>
    <h1>文件上传</h1>
    <form action="fileupload" method="post" enctype="multipart/form-data">
        <label for="file"><input id="file" type="file" name="file"></label><br>
        <label for="desc"><input id="desc" type="text" name="desc"></label><br>
        <button>上传</button>
    </form>
</body>
<script>
    // js从上往下顺序执行，所以showdata的初始化需要放置于调用之前
    function showdata(data){
        console.log(data);
        // 这狗比必须放到form表单下面，不然这坑比赋值的时候dom还没挂载，赋值不会成功
        $('#name1').val(data.name)
    }
</script>
<script type="text/javascript" src="http://127.0.0.1:8077/FirstMavenProject_war_exploded/jsonp?callback=showdata">
</script>
<script>
    $(function(){
       $('#saveBtn').click(function (){
           var row = {
               name: $('#name2').val(),
               age: $('#age2').val(),
               car: {
                   name:$('#car2_name').val(),
                   price:$('#car2_price').val(),
                   speed:$('#car2_speed').val()
               }
           }
           console.log(JSON.stringify(row))
           $.ajax({
               url: 'save-json',
               type:'post',
               contentType: 'application/json;charset=utf8',
               data:JSON.stringify(row)
           });
       });
    });
</script>
</html>
